<template>
	<div class="resaleAudiList content-wrap">
		<div class="content-top-box">
			<!-- 搜索区域 -->
			<ul class="search-container">
				<li>
					<span class="search-item-name">手机号：</span>
					<el-input class="search-item-content search-item-text" placeholder="请输入手机号" v-model="phone" clearable maxlength="11" @clear="clearPhoneFn">
					</el-input>
				</li>
				<li>
					<span class="search-item-name">姓名：</span>
					<el-input class="search-item-content search-item-text" placeholder="请输入姓名" v-model="userName" clearable @clear="clearUserName">
					</el-input>
				</li>
				<li>
					<span class="search-item-name">订单编号：</span>
					<el-input class="search-item-content search-item-text" placeholder="请输入订单编号" v-model="outTradeNo" clearable @clear="clearUserName">
					</el-input>
				</li>
				<li>
					<span class="search-item-name">转售时间：</span>
					<el-date-picker v-model="payDate" type="daterange" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" value-format="yyyy-MM-dd HH:mm:ss" @change="changePayDate">
					</el-date-picker>
				</li>
				<li>
					<span class="search-item-name">通知状态：</span>
					<el-select v-model="reminderMark" placeholder="请选择" clearable @change="changeType">
						<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</li>
				<li>
					<el-button class="search-btn" type="primary" icon="el-icon-search" @click="searchFn" v-if="searchBtn">查询</el-button>
					<download-excel class="export-excel-wrapper" :data="jsonData" :fields="jsonFields" name="转售订单到期提醒表.xls" v-if="exportBtn">
						<!-- 上面可以自定义自己的样式，还可以引用其他组件button -->
						<el-button class="search-btn" type="primary" icon="el-icon-download">导出</el-button>
					</download-excel>

				</li>
			</ul>
		</div>

		<div class="content-bottom-box">
			<!-- 表格 -->
			<div class="content-form-box">
				<el-table v-loading="loadingFlag" :data="tableData" :height="tableHeight" ref="table" border stripe style="width: 100%">
					<el-table-column prop="serialNumber" label="序号" width="50" fixed>
					</el-table-column>
					<el-table-column prop="outTradeNo" label="订单编号" width="180" fixed>
					</el-table-column>
					<el-table-column prop="createTime" label="转售时间" width="200">
					</el-table-column>
					<el-table-column prop="addressName" label="姓名" width="140">
					</el-table-column>
					<el-table-column prop="addressPhone" label="手机号" width="140">
					</el-table-column>
					<el-table-column prop="salesPrice" label="转售单价(元/kg)" width="140">
					</el-table-column>
					<el-table-column prop="productWeight" label="整牛重量(kg/头)" width="140">
					</el-table-column>
					<el-table-column prop="totalPrice" label="整牛单价(元/头)" width="140">
					</el-table-column>
					<el-table-column prop="minDeliveryTimeM" label="剩余交货期" width="120" :show-overflow-tooltip="true">
					</el-table-column>
					<el-table-column prop="minDeliveryTime" label="剩余交货天数" width="120" :show-overflow-tooltip="true">
					</el-table-column>
					<el-table-column prop="quantity" label="转售数量" width="120">
					</el-table-column>
					<el-table-column prop="cattleIdCard" label="耳标号" width="120">
					</el-table-column>
					<el-table-column prop="orderMoney" label="转售金额(元)" width="160">
					</el-table-column>
					<el-table-column prop="reminderMark" label="通知状态" width="130">
					</el-table-column>
					<el-table-column prop="reminderNote" label="备注" width="130">
					</el-table-column>
					<el-table-column label="操作" width="130" fixed="right" class-name="ccc">
						<template slot-scope="scope">
							<el-button @click="showDialog(scope.row)" type="text" size="small" v-if="scope.row.reminderMark =='待通知' && noticeBtn">待通知</el-button>
							<el-button @click="showDialog(scope.row)" type="text" size="small" disabled v-else-if="scope.row.reminderMark =='已通知' && noticeBtn">已通知</el-button>
							<el-button @click="showDialog(scope.row)" type="text" size="small" v-else-if="scope.row.reminderMark =='再次通知' && noticeBtn">再次通知</el-button>
							<el-button @click="checkResaleInfoFn(scope.row)" type="text" size="small" v-if="detailBtn">详情</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>

			<!-- 页码 -->
			<div class="content-Page-container">
				<BaseFormPage :pagination="pagination" @cFirstPageFn="cFirstPageFn" @cLastPageFn="cLastPageFn" @cJumpPageFn="cJumpPageFn" @cPreFn="cPreFn" @cNextFn="cNextFn" @cRefreshFn="cRefreshFn">
				</BaseFormPage>
			</div>
			<!-- 审核 -->
			<el-dialog title="通知确认" :visible.sync="dialogVisible" width="527px" :show-close="false" :close-on-click-modal="false" :close-on-press-escape="false" center>
				<div class="dialog-wrap">
					<p class="title">审核信息</p>
					<ul class="dialogList">
						<li>
							<span class="left">姓名</span>
							<span class="right">{{detailData.addressName}}</span>
						</li>
						<li>
							<span class="left">手机号</span>
							<span class="right">{{detailData.addressPhone}}</span>
						</li>
						<li>
							<span class="left">订单编号</span>
							<span class="right">{{detailData.outTradeNo}}</span>
						</li>
						<li>
							<span class="left">转售时间</span>
							<span class="right">{{detailData.createTime}}</span>
						</li>
						<li>
							<span class="left">转售单价(元/kg)</span>
							<span class="right">{{detailData.salesPrice}}</span>
						</li>
						<li>
							<span class="left">整牛重量(元/头)</span>
							<span class="right">{{detailData.productWeight}}</span>
						</li>
						<li>
							<span class="left">整牛单价(kg/头)</span>
							<span class="right">{{detailData.totalPrice}}</span>
						</li>
						<li>
							<span class="left">剩余交货期</span>
							<span class="right">{{detailData.minDeliveryTimeM}}个月</span>
						</li>
						<li>
							<span class="left">剩余交货天数</span>
							<span class="right">{{detailData.minDeliveryTime}}天</span>
						</li>
						<li>
							<span class="left">养殖地区</span>
							<span class="right er-biao">{{detailData.productCity}}</span>
						</li>
						<li>
							<span class="left">转售数量(头)</span>
							<span class="right">{{detailData.quantity}}</span>
						</li>
						<li>
							<span class="left">转售金额(元)</span>
							<span class="right">{{detailData.orderMoney}}</span>
						</li>
						<el-form ref="ruleForm" :model="buyData" class="demo-ruleForm" labelPosition='right'>
							<li>
								<span class="left">处理</span>
								<span class="right">
									<el-form-item prop="reminderMark">
								  		<el-radio-group v-model="buyData.reminderMark" @change="selectState">
										    <el-radio label="2">已通知</el-radio>
										    <el-radio label="3">再次通知</el-radio>
										</el-radio-group>
									</el-form-item>
								</span>
									
							</li>
							<li>
								<span class="left">备注</span>
								<span class="right last-right">
									<el-form-item prop="reminderNote">
						  				<el-input type="textarea" autosize v-model="buyData.reminderNote" placeholder="请输入内容"></el-input>
						  			</el-form-item>
						  		</span>
							</li>
						</el-form>
					</ul>
					<span slot="footer" class="dialog-footer">
						<el-button @click="cancelDialog('ruleForm')">取 消</el-button>
						<el-button type="primary" @click="keepDialog('ruleForm')">确 定</el-button>
					</span>
				</div>
			</el-dialog>
		
			<!-- 弹窗 -->
		<el-dialog 
		    title="转售详情" 
		    :visible.sync="dialogFlag"
		    :show-close="false"
		    width="804px"
		>
		    <div class="dialog-box">
		        <div class="info-detail-box">
		            <div class="info-detail-list">
		                <ul>
		                    <li class="list-title">订单信息</li>
		                    <li>
		                        <span class="info-tag-name">姓名：</span>
		                        <span class="info-tag-text">{{detailData.addressName}}</span>                
		                    </li>
		                    <li>
		                        <span class="info-tag-name">手机号：</span>
		                        <span class="info-tag-text">{{detailData.addressPhone}}</span>
		                    </li>
		                    <li>
		                        <span class="info-tag-name">性别：</span>
		                        <span class="info-tag-text">{{detailData.gender}}</span>
		                    </li>
		                    <li>
		                        <span class="info-tag-name">订单编号：</span>
		                        <span class="info-tag-text">{{detailData.outTradeNo}}</span>                
		                    </li>
			                <li>
			                    <span class="info-tag-name">转售时间：</span>
			                    <span class="info-tag-text">{{detailData.createTime}}</span>
			                </li>
			                <li>
			                    <span class="info-tag-name">养殖周期：</span>
			                    <span class="info-tag-text">{{detailData.timeLimit}}{{detailData.timeType}}</span>
			                </li>
			                <li>
			                    <span class="info-tag-name">剩余交货期：</span>
			                    <span class="info-tag-text">{{detailData.minDeliveryTimeM}}个月</span>
			                </li>
							<li>
			                    <span class="info-tag-name">剩余交货天数：</span>
			                    <span class="info-tag-text">{{detailData.minDeliveryTime}}天</span>
			                </li>
			                <li>
			                    <span class="info-tag-name">采购整牛单价(元/头)：</span>
			                    <span class="info-tag-text" v-if="detailData.salePriceSum !== null && detailData.quantity !== null">{{detailData.salePriceSum / detailData.quantity}}</span>
			                </li>
			                <li>
			                    <span class="info-tag-name">采购整牛重量(kg/头)：</span>
			                    <span class="info-tag-text">{{detailData.totalWeight}}</span>
			                </li>
		                </ul>
		            </div>
		            
		            <ul class="info-detail-list">
		            	<li style="margin-top: 30px;">
		                    <span class="info-tag-name">采购单价(元/kg)：</span>
		                    <span class="info-tag-text">{{detailData.salePriceSum}}</span>
		                </li>
		                <li>
		                    <span class="info-tag-name">转售单价(元/kg)：</span>
		                    <span class="info-tag-text">{{detailData.salesPrice}}</span>
		                </li>
		                <li>
		                    <span class="info-tag-name">转售整牛单价(元/头)：</span>
		                    <span class="info-tag-text">{{detailData.totalPrice}}</span>
		                </li>
		                <li>
		                    <span class="info-tag-name">转售数量(头)：</span>
		                    <span class="info-tag-text">{{detailData.quantity}}</span>
		                </li>
		                <li>
		                    <span class="info-tag-name">耳标号：</span>
		                    <span class="info-tag-text">{{detailData.cattleIdCard}}</span>
		                </li>
		                <li>
		                    <span class="info-tag-name">转售金额(元)：</span>
		                    <span class="info-tag-text">{{detailData.orderMoney}}</span>
		                </li>
		                 <li>
		                    <span class="info-tag-name">养殖地区：</span>
		                    <span class="info-tag-text">{{detailData.productCity}}</span>
		                </li>
		                <li>
		                    <span class="info-tag-name">养殖牧场：</span>
		                    <span class="info-tag-text">{{detailData.farmName}}</span>
		                </li>
		                <li>
		                    <span class="info-tag-name">合同编号：</span>
		                    <span class="info-tag-text">{{detailData.contractCode}}</span>
		                </li>
		                <li>
		                    <span class="info-tag-name">通知状态：</span>
		                    <span class="info-tag-text" v-if="detailData.reminderMark == 1">待通知</span>
		                    <span class="info-tag-text" v-if="detailData.reminderMark == 2">已通知</span>
		                    <span class="info-tag-text" v-if="detailData.reminderMark == 3">再次通知</span>
		                </li>
		            </ul>
		        </div>
		        <div class="dialog-btn">
		            <el-button type="primary" size="medium" @click="dialogFlag = false">关闭</el-button>
		        </div>
		    </div>
		</el-dialog>
		</div>
	</div>
</template>

<script>
	import Storage from "@/utils/storage";
	import BaseFormPage from '@/components/BaseFormPage';
	export default {
		components: {
			BaseFormPage
		},
		inject: ['reload'],
		data() {
			return {
				dialogVisible: false, // 审核框
				loadingFlag: false, //表格数据加载状态
				dialogFlag: false, //弹窗显示状态
				phone: '',
				userName: '',
				outTradeNo: '',
				startCreateTime: '',
				endCreateTime: '',
				reminderMark: '',
				options: [{
					value: '1',
					label: '待通知'
				}, {
					value: '2',
					label: '已通知'
				}, {
					value: '3',
					label: '再次通知'
				}],
				buyData: {
					id: '',
					reminderMark: '',
					reminderNote: '',
				},
				value: '',
				payDate: '',
				payState: '',
				pageIndex: 1,
				pageSize: 20,
				tableHeight: 200, //表格初始高度
				tableData: [], //表格数据
				pagination: { //分页数据
					loadingFlag: false, //数据加载状态
					currentPage: 1, //当前页
					totalPage: 1, //总页数
					totalNum: 0, //总条数
					firstNum: 0, //分页显示起始值
					endNum: 0 //分页显示结束值
				},
				jsonData: [],
				jsonFields: {
					"序号": "index",
					"订单编号": "outTradeNo",
					"转售时间": "createTime", 
					"姓名": "addressName",
					"手机号": "addressPhone",
					"转售单价(元/kg)": "salesPrice",
					"整牛重量(kg/头)": "productWeight",
					"整牛单价(元/头)": "totalPrice",
					"剩余交货期": "minDeliveryTimeM",
					"剩余交货天数": "minDeliveryTime",
					"转售数量": "quantity",
					"耳标号": "cattleIdCard",
					"转售金额(元)": "orderMoney",
					"通知状态": "reminderMark",
					"备注": "reminderNote"
				},
				jsonMeta: [
					[{
						"key": "charset",
						"value": "utf-8"
					}]
				],
				detailId: '',
				detailData: {},

				searchBtn: (JSON.parse(Storage.get('roleAuthIdArr'))).indexOf(241) == -1 ? false : true,
				exportBtn: (JSON.parse(Storage.get('roleAuthIdArr'))).indexOf(242) == -1 ? false : true,
				noticeBtn: (JSON.parse(Storage.get('roleAuthIdArr'))).indexOf(243) == -1 ? false : true,
				detailBtn: (JSON.parse(Storage.get('roleAuthIdArr'))).indexOf(245) == -1 ? false : true,
			}
		},
		created(){
			this.getListData()
		},
		methods: {
			getListData(){
				this.loadingFlag = true;
				this.pagination.loadingFlag = true;
				let params = {
					phone: this.phone,
					userName: this.userName,
					outTradeNo: this.outTradeNo,
					reminderMark: this.reminderMark,
					startCreateTime: this.startCreateTime,
					endCreateTime: this.endCreateTime,
					pgCt: this.pageIndex,
					pgSz: this.pageSize
				}
				if(!this.phone) {
					delete params.phone
				}
				if(!this.userName) {
					delete params.userName
				}
				if(!this.outTradeNo) {
					delete params.outTradeNo
				}
				if(!this.reminderMark) {
					delete params.reminderMark
				}
				if(!this.startCreateTime) {
					delete params.startCreateTime
				}
				if(!this.endCreateTime) {
					delete params.endCreateTime
				}
				this.$http.get('/cattleFlowReview/resaleOrderReminder/list', params)
				.then((res)=>{
					console.log(res.data.records)
					if(res.data.records.length > 0) {
							this.pagination.totalPage = res.data.pages;
							this.pagination.totalNum = res.data.total;
							res.data.records.forEach((item, index) => {
								if(item.reminderMark == 1){
									item.reminderMark = '待通知'
								} else if(item.reminderMark == 2){
									item.reminderMark = '已通知'
								} else if(item.reminderMark == 3){
									item.reminderMark = '再次通知'
								}
								item.minDeliveryTimeM = item.minDeliveryTimeM + '个月'
								item.minDeliveryTime = item.minDeliveryTime + '天'
								//列表下标
								item.index = index
								//列表序号
								item.serialNumber = ((this.pageIndex - 1) * this.pageSize) + (index + 1)
								//无数据处理
								item.reminderNote = item.reminderNote || '--'
							})
							this.pagination.firstNum = res.data.records[0].serialNumber
							this.pagination.endNum = res.data.records[res.data.records.length - 1].serialNumber
						} else {
							this.pagination.currentPage = 1
							this.pagination.totalPage = 1
							this.pagination.totalNum = 0
							this.pagination.firstNum = 0
							this.pagination.endNum = 0
						}
						this.tableData = res.data.records;
				})
				.then(() => {
						if(this.tableData.length !== 0) {
							this.tableHeightFn();
						}
						this.loadingFlag = false;
						this.pagination.loadingFlag = false;
						this.getAllListData()
					})
			},
			getDetailData(){
				this.$http.get('/cattleFlowReview/resaleOrderReminder/audit/' + this.detailId)
				.then(({data})=>{
					console.log(data)
					this.detailData = data;
				})
			},
			changePayDate() {
				if(this.payDate) {
					this.startCreateTime = this.payDate[0]
					this.endCreateTime = this.payDate[1].replace('00:00:00', '23:59:59')
				} else {
					this.startCreateTime = ''
					this.endCreateTime = ''
				}
				this.resetPageIndex()
				this.getListData()
			},
			changeType(){ // 通知状态
				this.resetPageIndex()
				this.getListData()
			},
			resetPageIndex() { //重置页码
				this.pagination.currentPage = 1;
				this.pageIndex = 1;
			},
			clearPhoneFn() { //清空手机号
				this.resetPageIndex()
				this.getListData()
			},
			clearUserName() { //清空姓名
				this.resetPageIndex()
				this.getListData()
			},
			searchFn() {
				this.resetPageIndex()
				this.getListData()
			},
			cFirstPageFn(pageNum) { //首页
				this.pageIndex = pageNum;
				this.getListData()
			},
			cLastPageFn(pageNum) { //尾页
				this.pageIndex = pageNum;
				this.getListData()
			},
			cJumpPageFn(pageNum) { //页码跳转
				this.pageIndex = pageNum;
				this.getListData()
			},
			cPreFn(pageNum) { //上一页
				this.pageIndex = pageNum;
				this.getListData()
			},
			cNextFn(pageNum) { //下一页
				this.pageIndex = pageNum;
				this.getListData()
			},
			resetParams() { //重置参数

			},
			cRefreshFn() { //刷新
				this.reload()
			},
			checkResaleInfoFn(item) { // 详情点击
				console.log(item)
				this.detailId = item.id;
				this.getDetailData();
				this.dialogFlag = true;
			},
			selectState(value) {
				console.log(value)
				this.buyData.state = value;
			},
			showDialog(item) {
				this.buyData.id = item.id;
				this.detailId = item.id;
				this.getDetailData();
				this.dialogVisible = true;
			},
			cancelDialog(formName) {
				this.dialogVisible = false;
				this.$refs[formName].resetFields();
			},
			keepDialog(formName) {
				if(this.buyData.reminderMark){
					this.$http.get('/cattleFlowReview/resaleOrderReminder/remind', this.buyData)
					.then((res)=>{
						console.log(res)
						if(res.data == 200){
							this.dialogVisible = false;
							this.$refs[formName].resetFields();
							this.getListData();
						}
					})
				} else {
					this.$message({
			          message: '请选择处理状态',
			          type: 'warning',
			          offset: '70'
			        })
				}
				
			},
			tableHeightFn() { //表格高度
				let tableDataLength = this.tableData.length;
				let minHeight = tableDataLength == 0 ? 0 : 80; //根据需求距离底部的高度
				this.$nextTick(function() {
					//window.innerHeight:浏览器的可用高度
					//this.$refs.table.$el.offsetTop：表格距离浏览器的高度
					this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop - minHeight;
					if(this.tableData.length <= 0) {
						this.tableHeight = '60vh'
					}

					// 通过捕获系统的onresize事件触发去改变原有的高度
					let self = this;
					window.onresize = function() {
						self.tableHeight = window.innerHeight - self.$refs.table.$el.offsetTop - minHeight;
						self.tableHeight = self.tableHeight < 200 ? 200 : self.tableHeight;
					}
				})
			},
			getAllListData(){
				let params = {
					phone: this.phone,
					userName: this.userName,
					outTradeNo: this.outTradeNo,
					reminderMark: this.reminderMark,
					startCreateTime: this.startCreateTime,
					endCreateTime: this.endCreateTime,
					pgCt: 1,
					pgSz: 99999
				}
				if(!this.phone) {
					delete params.phone
				}
				if(!this.userName) {
					delete params.userName
				}
				if(!this.outTradeNo) {
					delete params.outTradeNo
				}
				if(!this.reminderMark) {
					delete params.reminderMark
				}
				if(!this.startCreateTime) {
					delete params.startCreateTime
				}
				if(!this.endCreateTime) {
					delete params.endCreateTime
				}
				this.$http.get('/cattleFlowReview/resaleOrderReminder/list', params)
				.then((res)=>{
					console.log(res.data.records)
					if(res.data.records.length > 0) {
							res.data.records.forEach((item, index) => {
								if(item.reminderMark == 1){
									item.reminderMark = '待通知'
								} else if(item.reminderMark == 2){
									item.reminderMark = '已通知'
								} else if(item.reminderMark == 3){
									item.reminderMark = '再次通知'
								}
								item.minDeliveryTimeM = item.minDeliveryTimeM + '个月'
								item.minDeliveryTime = item.minDeliveryTime + '天'
								//列表下标
								item.index = index + 1
								//列表序号

							})
						}
						this.jsonData = res.data.records;
				})
			},
		},

	}
</script>
<style type="text/css">
	.resaleAudiList .dialog-wrap .el-input__inner,.resaleAudiList .dialog-wrap .el-textarea__inner {
		border-color: #fff !important;
	}
	.resaleAudiList .dialog-wrap .el-form-item{
		margin-bottom: 0;
	}
	.resaleAudiList .dialog-wrap .el-form-item__error{
		z-index: 9;
	}
	.ccc .cell{
		display: flex;
		justify-content: space-between;
		padding: 0 20px;
	}
</style>
<style lang="scss" scoped>
@import '@/assets/css/dialogDetail.scss';
</style>